<template>
    <div class="app-container">
        <div class="head-container">
            <!-- 搜索 -->
            <tr>
                <td>关联项目:</td>
                <td>
                    <el-input v-model="listQuery.assemblenumber" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>退货编号:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>退货主题:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>退货日期:</td>
                <td>
                    <el-date-picker type="date" placeholder="开始日期" v-model="listQuery.startDate" style="width: 184px;">
                    </el-date-picker>

                </td>
                <td>
                    <el-date-picker type="date" placeholder="结束日期" v-model="listQuery.endDate" style="width: 184px;">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>关联采购单:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>发货状态:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>供应商:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>出库进展:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
                <td>退货人员:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>
            </tr>
            <tr>
                <td>退货金额:</td>
                <td>
                    <el-input v-model="listQuery.dadname" clearable size="small" placeholder="搜索..."
                        style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                </td>

                <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="handleFilter">搜索
                </el-button>
            </tr>


            <div style="padding: 6px 0">
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleCreate">新增
                </el-button>
                <el-button class="filter-item" size="mini" type="success" icon="el-icon-edit" @click="handleUpdate()">修改
                </el-button>
                <el-button slot="reference" class="filter-item" type="danger" icon="el-icon-delete" size="mini"
                    @click="handleDelete()">删除</el-button>

            </div>
        </div>
        <el-table ref="multipleTable" v-loading="listLoading" :data="list" size="small" style="width: 90%;"
            @sort-change="sortChange" @selection-change="handleSelectionChange" @row-click="handleRowClick">
            <el-table-column type="selection" width="44px"></el-table-column>
            <el-table-column type="index" label="序号" />
            <el-table-column label="采购退货编号" prop="recode" align="center"></el-table-column>
            <el-table-column label="采购退货主题" prop="dosubject" align="center" />
            <el-table-column label="关联采购合同" prop="sucontract" align="center" />
            <el-table-column label="供应商名称" prop="suname" align="center"></el-table-column>
            <el-table-column label="关联项目" prop="reitem" align="center" />
            <el-table-column label="退货类别" prop="retype" align="center" />
            <el-table-column label="退货数量" prop="sanum" align="center"></el-table-column>
            <el-table-column label="退货金额" prop="saprice" align="center" />
            <el-table-column label="退货人员" prop="returnpersonnel" align="center"></el-table-column>
            <el-table-column label="退货日期" prop="redatetimes" align="center">
                <template v-slot="scope">
                    {{ scope.row.redatetimes.substr(0, 10) }}
                </template>
            </el-table-column>


        </el-table>
        <pagination v-show="totalCount > 0" :total="totalCount" :page.sync="page" :limit.sync="listQuery.MaxResultCount"
            @pagination="getList" />
    </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { cloneDeep } from "lodash";
import router from "vue-router";

const defaultForm = {
    assemblenumber: '',
    dadname: '',
    dadwei: '',
    dadnum: '',

    zdname: '张丽丽',
    zdDesc: '',
    productAssembleDtolist: [
        {


            cpname: '',
            cpnumber: '',
            cptype: '',
            cpdw: '',
            cpprice: '',
            cpnum: 0,
            cpdesc: ''
        }
    ]

}
export default {
    name: 'Book',
    components: {
        Pagination
    },
    directives: {
        permission
    },
    props: [],
    data() {
        return {
            rules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
                description: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
                price: [{
                    required: true,
                    message: '价格',
                    trigger: 'blur'
                }],
            },
            form: Object.assign({}, defaultForm),
            list: [],
            totalCount: 0,
            listLoading: true,
            formLoading: false,
            listQuery: {
                assemblenumber: '',
                dadname: '',
                Filter: '',
                Sorting: '',
                SkipCount: 0,
                MaxResultCount: 10
            },
            page: 1,
            dialogFormVisible: false,
            multipleSelection: [],
            formTitle: '',
            isEdit: false,
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getList()
    },
    mounted() { },
    methods: {
        getListStatus(items, ids) {
            this.$axios.posts('api/business/workflow/node-status', ids).then(response => {
                items.forEach(element => { response.items.filter((i) => { if (i.entityId === element.id) { element.status = i.status; element.nodeId = i.nodeId; element.nodeStatus = i.nodeName } }) })
                this.list = items
                this.listLoading = false;
            });
        },
        getList() {
            this.listLoading = true;
            this.listQuery.SkipCount = (this.page - 1) * this.listQuery.MaxResultCount;
            this.$axios.gets('/api/business/sale/getAllinfo/', this.listQuery).then(response => {
                this.totalCount = response.totalCount;
                this.getListStatus(response.items, response.items.map(_ => _.id))
            });
        },
        fetchData(id) {
            this.$axios.gets('/api/business/book/' + id).then(response => {
                this.form = response;
            });
        },
        handleFilter() {
            this.page = 1;
            this.getList();
        },
        handleCreate() {

            this.$router.push('/assemble/assembleadd')

        },
        handleDelete(row) {
            var params = [];
            let alert = '';
            if (row) {
                params.push(row.id);
                alert = row.name;
            }
            else {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        message: '未选择',
                        type: 'warning'
                    });
                    return;
                }
                this.multipleSelection.forEach(element => {
                    let id = element.id;
                    params.push(id);
                });
                alert = '选中项';
            }
            this.$confirm('是否删除' + alert + '?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.posts('/api/business/assembleInfo/delete', params).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleCheck() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '未选择',
                    type: 'warning'
                });
                return;
            }
            if (this.multipleSelection.length > 1) {
                this.$message({
                    message: '暂不支持批量审核',
                    type: 'warning'
                });
                return;
            }
            this.$confirm('是否审核所选项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.puts('api/business/workflow/do/' + this.multipleSelection[0].id, { data: JSON.stringify(this.multipleSelection[0]) }).then(response => {
                    this.$notify({
                        title: '成功',
                        message: '审核成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getList();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });
            });
        },
        findFlow(row) {
            this.$router.push({ path: "/tool/flowDisplay/" + row.nodeId });
        },
        handleUpdate(row) {

            this.formTitle = '编辑快递公司';
            this.isEdit = true;
            if (row) {
                this.$router.push({
                    path: "/assemble/assembleAdd",
                    query: {
                        id: row.id
                    }
                })
            }
            else {
                if (this.multipleSelection.length != 1) {
                    this.$message({
                        message: '编辑必须选择单行',
                        type: 'warning'
                    });
                    return;
                }
                else {
                    this.$router.push({
                        path: "/assemble/assembleupd",
                        query: {
                            id: this.multipleSelection[0].id
                        }
                    })
                }
            }
        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    this.form.roleNames = this.checkedRole;
                    if (this.isEdit) {
                        this.$axios.posts('/api/business/book/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();

                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                    else {
                        this.$axios.posts('/api/business/book/data-post', this.form).then(response => {
                            this.formLoading = false;
                            this.$notify({
                                title: '成功',
                                message: '新增成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogFormVisible = false;
                            this.getList();
                        }).catch(() => {
                            this.formLoading = false;
                        });
                    }
                }
            });
        },
        sortChange(data) {
            const {
                prop,
                order
            } = data;
            if (!prop || !order) {
                this.handleFilter();
                return;
            }
            this.listQuery.Sorting = prop + ' ' + order;
            this.handleFilter();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRowClick(row, column, event) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row);
        },
        cancel() {
            this.form = Object.assign({}, defaultForm);
            this.dialogFormVisible = false;
            this.$refs.form.clearValidate();
        },
    }
}
</script>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #afacac;
    text-align: left;
    padding: 8px;
}

tr {
    background-color: #dfeffa;
}
</style>